layui.define(['form', 'jquery'], function (exports) {
    let form = layui.form;
    let $ = layui.jquery;
    let areaData = [];
    let selected = {
        provinceIndex: 0,
        cityIndex: 0,
        districtIndex: 0,
    };

    let addlink = {
        options: {
            // 数据请求地址
            // url: '/static/data/address.json',
            url: '',
            // 选择框
            elems: {
                province: 'select[name=province]',
                city: 'select[name=city]',
                district: 'select[name=district]',
            },
            // 当前数据 [150000, 150100, 150105]
            value: [0, 0, 0],
        },
        render: function (options = {}) {
            this.options.url = options.url || this.options.url;
            this.options.elems = options.elems || this.options.elems;
            this.options.value = options.value || this.options.value;
            area_init(this.options);
        },
    };

    function area_init(options) {
        let e_province = $(options.elems.province);
        let e_city = $(options.elems.city);
        let e_district = $(options.elems.district);
        let current = options.value;

        // 异步从接口获取json数据保存在全局变量中
        $.get(options.url, function (data) {
            areaData = data;
            loadProvince();
            // 编辑情景下，渲染已有城市、区/县数据
            loadCity();
            loadDistrict();
            current = [0, 0, 0]; // 首次渲染完成之后，重置当前数据中地区代码，防止后续选择时自动填充
        });

        // 加载省份数据
        function loadProvince() {
            // 初始化省份选择框状态
            e_province.html('<option value="">请选择省</option>');

            // 渲染省份选择框
            let provinceData = areaData;
            for (let i = 0; i < provinceData.length; i++) {
                e_province.append(new Option(provinceData[i].name, provinceData[i].id, false, current[0] === provinceData[i].id));
            }
            form.render();

            // 保存省份选择框已选数据索引，编辑情景下为下一级提供索引
            selected.provinceIndex = e_province[0].selectedIndex;

            // 省份选择框事件监听
            let _filter = e_province.attr("lay-filter");
            form.on('select(' + _filter + ')', function (data) {
                selected.provinceIndex = data.elem.selectedIndex;
                loadCity();
            });
        }

        // 加载城市数据
        function loadCity() {
            // 初始化城市、区/县选择框状态
            e_city.html('<option value="">请选择市</option>').attr('disabled', 'disabled');
            e_district.html('<option value="">请选择区/县</option>').attr('disabled', 'disabled');

            // 未选择省份数据
            if (selected.provinceIndex < 1) {
                selected.cityIndex = 0;
                form.render();
                return;
            }

            // 渲染城市选择框
            let cityData = areaData[selected.provinceIndex - 1].children;
            for (let i = 0; i < cityData.length; i++) {
                e_city.append(new Option(cityData[i].name, cityData[i].id, false, current[1] === cityData[i].id));
            }
            e_city.removeAttr("disabled");
            form.render();

            // 保存城市选择框已选数据索引，编辑情景下为下一级提供索引
            selected.cityIndex = e_city[0].selectedIndex;

            // 城市选择框事件监听
            let _filter = e_city.attr("lay-filter");
            form.on('select(' + _filter + ')', function (data) {
                selected.cityIndex = data.elem.selectedIndex;
                loadDistrict();
            });
        }

        // 加载区/县数据
        function loadDistrict() {
            // 初始化区/县选择框状态
            e_district.html('<option value="">请选择区/县</option>').attr('disabled', 'disabled');

            // 未选择城市数据
            if (selected.cityIndex < 1) {
                selected.districtIndex = 0;
                form.render();
                return;
            }

            // 渲染区/县选择框
            let districtData = areaData[selected.provinceIndex - 1].children[selected.cityIndex - 1].children;
            for (let i = 0; i < districtData.length; i++) {
                e_district.append(new Option(districtData[i].name, districtData[i].id, false, current[2] === districtData[i].id));
            }
            e_district.removeAttr("disabled");
            form.render();

            // 保存区/县选择框已选数据索引，编辑情景下为下一级提供索引
            selected.districtIndex = e_district[0].selectedIndex;

            // 区/县选择框事件监听
            var _filter = e_district.attr("lay-filter");
            form.on('select(' + _filter + ')', function (data) {
                selected.districtIndex = data.elem.selectedIndex;
            });
        }
    }

    exports('okAddlink', addlink);
});
